<template>
    <div class="page-container">
          <!-- 背景图区域 -->
          <div class="page-wrapper" :style=" { backgroundImage:`url(${bgImg})`, height:'100vh', backgroundPosition:'50% 50%', backgroundColor:'#000' }">
              <div class="page-content">
                    <div class="text-container" style="top:36%; ">
                        <div style="margin-bottom:60px;"><img :src="bgLogo" /></div>
                        <div style="font-size:48px; letter-spacing:4px; line-height:42px; font-weight:lighter; color:#fff; margin-bottom:16px; ">能源 安防 环境 运维</div>
                        <div style="font-size:48px; letter-spacing:4px; line-height:48px; font-weight:bolder; color:#4D90FF; ">智慧工业集成商</div>
                        <div style="font-size:24px; letter-spacing:4px; line-height:42px; margin:36px 0; color:rgba(255, 255, 255, 0.6)">Energy Security Environment Maintenance<br/>Intelligence Industrial Integrator</div>
                        <el-button size="large" color="#335CFF" @click="handleClick">立即试用</el-button>
                    </div>
              </div>
          </div>
        
          <!-- 二级介绍展开区 -->
          <HoverUnfold />
          <!-- 子应用轮播展示区 -->
          <FollowSlider />
          <!-- 小易AI内容区----场景化定制 -->
          <AIContent1 />
          <!-- 小易AI内容区----千人千面 -->
          <AIContent2 />  
          <!-- 案例轮播 -->
          <!-- 华翊动态 -->
          <CaseContent />
          <LatestNews />
          <!-- 底部背景 -->
            <div class="page-wrapper" :style="{ position:'relative', height:'240px', overflow:'hidden' }">
                <img :src="Bg" class="motion-bg" />  
                <div class="page-content" style="display:flex; align-items: center; flex-direction:column; justify-content:center; ">
                      <div style="font-size:24px; line-height:42px; margin:26px 0; color:#fff; ">能源 安防 环境 运维 智慧工业集成商</div>
                      <div><el-button size="large" color='#fff' @click="handleClick">立即试用</el-button></div>
                  </div>
            </div>
    </div>
</template>

<script setup>
    import { markAction } from '@/api/global.js';
    import { watch, onMounted, ref, reactive } from 'vue';
    import bgImg from '../../../public/home-bg.png';
    import bgLogo from '../../../public/home-bg-logo.png';
    import HoverUnfold from './HoverUnfold.vue';
    import AIContent1 from './AIContent1.vue';
    import AIContent2 from './AIContent2.vue';
    import FollowSlider from '@/components/FollowSlider/index.vue';
    import CaseContent from './CaseContent.vue';
    import LatestNews from './LatestNews.vue';
    import Bg from '../../../public/motion-bg.png';
    const handleClick = ()=>{
        markAction({ operationType:'进入厂务' });
        window.open('http://iot.ifmcs.com', '__blank');
    }

</script>

<style>
    .motion-bg {
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%, -50%);
        animation: bganimation 6s ease-in-out infinite;
    }
    @keyframes bganimation {
        0%{
            transform:translate(-50%, -50%);
        }
        25% {
            transform:translate(-80%, -50%);
        }
        50%{
            transform:translate(-50%, -50%);
        }
        75%{
            transform:translate(-30%, -50%);
        }
        100%{
            transform:translate(-50%, -50%);
        }
    }
</style>
  
  